<%--
  Created by IntelliJ IDEA.
  User: cyc
  Date: 2021/10/2
  Time: 15:26
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>后台管理 - 易买网</title>
    <link type="text/css" rel="stylesheet" href="../css/style.css" />
    <link rel="stylesheet" href="${pageContext.request.contextPath}/layui/css/layui.css">
    <script type="text/javascript" src="${pageContext.request.contextPath}/scripts/jquery-1.8.3.js"></script>
    <script type="text/javascript" src="${pageContext.request.contextPath}/scripts/function.js"></script>
</head>
<body>

<div class="main">
    <h2>分类管理 <button id="add" class="layui-btn">添加分类信息</button></h2>
    <form action="${pageContext.request.contextPath}/category/add" class="layui-form" style="display: none;height: 200px;width: 350px" id="cateadd">
        <div class="layui-form-item">
            <label class="layui-form-label">父目录</label>
            <div class="layui-input-inline">
                <select name="parentid" lay-verify="required">
                    <option value="0">根目录</option>
                    <c:forEach items="${sessionScope.categorylist}" var="i">
                        <option value="${i.id}">${i.name}</option>
                    </c:forEach>
                </select>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">分类名称</label>
            <div class="layui-input-inline">
                <input type="text" class="layui-input" name="name" lay-verify="required">
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label"></label>
            <div class="layui-input-inline">
                <input type="button" class="layui-btn" value="添加" lay-submit="" id="btn_add">
            </div>
        </div>
    </form>


    <div class="manage">
        <table  id="producttable" lay-filter="usertable">
            <script type="text/html" id="barDemo">

                <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
                <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>

            </script>

        </table>


        <form action="../ManageCategoryModifyServlet" class="layui-form" style="display: none;height: 200px;width: 350px" id="cateModify">
            <div class="layui-form-item">
                <label class="layui-form-label">父目录</label>
                <div class="layui-input-inline">
                    <select name="parentid" lay-verify="required">
                        <option value="0">根目录</option>
                        <c:forEach items="${sessionScope.categorylist}" var="i">
                            <option value="${i.id}">${i.name}</option>
                        </c:forEach>

                    </select>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">分类名称</label>
                <div class="layui-input-inline">
                    <input type="text" class="layui-input" name="name" lay-verify="required">
                    <input type="text" class="layui-input" name="id" style="display: none">
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label"></label>
                <div class="layui-input-inline">
                    <input type="button" class="layui-btn" value="修改" lay-submit="" id="btn_mod">
                </div>
            </div>
        </form>

    </div>
</div>
<div class="clear"></div>

</div>
<div id="footer">
    Copyright &copy; 2013 北大青鸟 All Rights Reserved. 京ICP证1000001号
</div>
<script src="${pageContext.request.contextPath}/layui/layui.js"></script>
<script>
    var $=layui.$;
    layui.use(["table",'layer','form'],function (){
        var table=layui.table;
        var  form=layui.form;
        form.render();
        table.render({
            elem: '#producttable'
            ,height: 500
            ,url: '${pageContext.request.contextPath}/category/manall' //数据接口
            ,page: true //开启分页
            ,cols: [[ //表头
                {field: 'id', title: '编号', width:80, fixed: 'left'}
                ,{field: 'name', title: '分类名称', width:1300}
                ,{fixed: 'right', width:150, align:'center', toolbar: '#barDemo'}
            ]]
        });

        table.on('tool(usertable)', function(obj){ //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
            var data = obj.data; //获得当前行数据
            var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
            var tr = obj.tr; //获得当前行 tr 的 DOM 对象（如果有的话）

            if(layEvent === 'del'){ //删除
                $.ajax({
                    type:"post",
                    dataType:"json",
                    url: "${pageContext.request.contextPath}/category/del",
                    data:{"id":data.id},
                    success :function (res){
                        alert(res.msg);
                        //表格重载
                        table.reload('producttable', {
                        });
                    }
                });
            } else if(layEvent === 'edit'){ //编辑
                //do something
                var index=data.name.lastIndexOf("=>")+2;

                $("input[name=name]").val(data.name.substring(index));
                $("input[name=id]").val(data.id);
                // $("option[value="+data.id+"]").attr({"selected":"selected"});

                layer.open({
                    type:1,
                    title:"修改分类信息",
                    content:$("#cateModify")
                });

                //同步更新缓存对应的值

            } else if(layEvent === 'LAYTABLE_TIPS'){
                layer.alert('Hi，头部工具栏扩展的右侧图标。');
            }
        });

        $("#btn_mod").click(function (){
            var data=$("#cateModify").serialize();
            $.post("${pageContext.request.contextPath}/category/update",data,function (res){
                alert(res.msg);
                table.reload('producttable', {
                });
            },"json");
        });

        $("#btn_add").click(function (){
            var data=$("#cateadd").serialize();
            $.post("${pageContext.request.contextPath}/category/add",data,function (res){
                alert(res.msg);
                table.reload('producttable', {
                });
            },"json");
        });
    });

    $("#add").click(function (){
        layer.open({
            type:1,
            title:"添加分类信息",
            content:$("#cateadd")
        });
    });
</script>
</body>
</html>
